html,
body {
    padding: 0;
    margin: 0;

    height: 100%;
    /* width: 100%; */

    background-image: url("./1.jpg");
    background-repeat: no-repeat;
    /* background-size: contain; 保持图片的横纵比，且在容器中最大的大小 */
    background-size: cover;
    /*把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
    背景图像的某些部分也许无法显示在背景定位区域中。*/
}

#box1 {
    width: 100px;
    height: 100px;
    background-color: red;
}

#box2 {
    width: 100px;
    height: 100px;
    background-color: blue;
    /* position: relative; */
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
    /* bottom: 0; */
}

#box3 {
    width: 100px;
    height: 100px;
    background-color: black;
    position: relative;

}

#box4 {
    width: 50px;
    height: 50px;
    background-color: pink;
    position: absolute;
    top: 10px;
}

#box5 .box6 {
    width: 100px;
    height: 100px;
    background-color: aqua;

}

.box6 {
    width: 50px;
    height: 50px;
    background-color: red;
    /* background-color: red !important;   覆盖 */

}

#parent>ul {
    list-style-type: none;
}
span:last-child{
    color: aqua;
}